<template>
    <div>
        <!-- 移动支付订单 -->
        <div class="container">
            <!-- 表单 -->
            <el-form :inline="true" :model="formList" class="ticketForm" id="mobilePayment">
                <el-form-item label="创建时间起">
                    <el-date-picker type="date" size="mini" class="minipt" v-model="formList.startDate"></el-date-picker>
                    至
                    <el-date-picker type="date" size="mini" class="minipt" v-model="formList.endDate"></el-date-picker>
                </el-form-item> 
                <el-form-item label="售票员">
                    <el-input size="mini" v-model="formList.query1" class="inp"></el-input>
                </el-form-item>
                <el-form-item label="订单状态" lable-width="55px">
                    <el-select  size="mini" v-model="formList.query8">
                        <el-option value="yes">未提交</el-option>
                        <el-option value="no">否</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式">
                    <el-select  size="mini" v-model="formList.query8">
                        <el-option value="yes">现金</el-option>
                        <el-option value="no">电子支付</el-option>
                    </el-select>
                </el-form-item>
                <button class="check-btn rf" type="button" >
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                </button>
            </el-form>
            <!-- 订单查询 -->
            <div class="searchForm">
                <span> <img src="../../assets/imgs/operation_icon_shousuo_default.png" alt=""> 查询订单状态</span>
                <span> <img src="../../assets/imgs/operation_icon_tuihuan_default.png" alt=""> 退款异常</span>
            </div>
            <!-- 表格1 -->
            <div>
                <el-table style="width: 100%" :data="tableData">
                    <el-table-column type="index" width="60">
                    </el-table-column>
                    <el-table-column prop="state" label="" width="100"></el-table-column>
                    <el-table-column prop="money" label="金额"  width="100"></el-table-column>
                    <el-table-column prop="time" label="提交时间"  width="100"></el-table-column>
                    <el-table-column prop="payWay" label="支付方式"  width="100"></el-table-column>
                    <el-table-column prop="payTime" label="支付时间"  width="100"></el-table-column>
                    <el-table-column prop="payNumber" label="支付单号"  width="200"></el-table-column>
                    <el-table-column prop="" label=""  width="530"></el-table-column>
                </el-table>
            </div>
            <!-- 合计 -->
            <div class="totalMoeny">
                合计:<span>{{totalMoney}}</span>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                 <el-pagination
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
            </div>
            <!-- 异常退款 -->
            <div class="backMoney">
                <span> <img src="../../assets/imgs/operation_icon_tuihuan_default.png" alt=""> 退款异常</span>
            </div>
             <!-- 表格2 -->
            <div class="table2">
                <el-table style="width: 100%" :data="tableList">
                    <el-table-column type="index" width="60">
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="100"></el-table-column>
                    <el-table-column prop="description" label="描述" width="400"></el-table-column>
                    <el-table-column prop="" label=""  width="730"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
    return {
        formList: {
            startDate: "",
            endDate: "",
            query1: "",
            query2: "",
            query3: "",
            query4: "",
            startDate1: "",
            endDate1: "",
            query5: "",
            query6: "",
            query7: "",
            query8: ""
        },
        tableData:[],
        totalMoney:[],
        tableList:[]
    };
  },
  methods: {

        //
      getTableList() {
          this.tableList = [];
          this.$http
              .post("/tks/noncash/order/details/list")
              .then(data => {
                  console.log(data.data);
                  for (var item of data.data.list) {
                      this.tableList.push({
                          state :item.bill_status_cn,
                          description:item.overview,
                      });
                  }

                  console.log(this.tableData);
              });
      },

      getTableData() {
          this.tableData = [];
          this.$http
              .post("/query/tks/noncash/orders/list")
              .then(data => {
                  console.log(data);
                  for (var item of data.data.list) {
                      this.tableData.push({
                          state:item.order_status_cn,
                          money:item.total_amount,
                          time:item.create_time,
                          payWay:item.pay_type_cn,
                          payTime:item.trade_no,
                          payNumber:item.orderno,
                      });
                  }
                  console.log(this.tableData);
              });
      }
  },
    mounted() {
        this.getTableData();
        this.getTableList();
    }

}
</script>
<style scoped>
@import url('../../assets/css/check/mobilePayment.css');
.el-date-editor.el-input{
    width:150px!important;
}
.check_btn,.check_btn:hover{
    background: #009688;
    border-radius: 5px;
    border: 0px;
    color: white;
    cursor: pointer;
    padding:10px 20px;
}

</style>
